<template>
  <div class="contant">
    <h2>精选攻略</h2>
    <div class="container-water-fall">
        <waterfall :data="data">
          <template >
            <div class="cell-item" :col="col" v-for="(item,index) in data" @click="jumpTo(item.imgId)" style="">
              <img class="item-img" :src="item.src" style="width: 100%;" alt="">
              <div class="item-body">
                  <div class="item-desc">{{item.title}}</div>
                  <div class="item-footer">

                    <p class="user-name"><img :src="item.user" alt="">{{item.name}}</p>

                    <p><img src="../assets/index/喜欢.png" alt="">{{item.liked}}</p>
                      <!-- <div class="name"></div> -->
                      <!-- <div class="like" :class="item.liked?'active':''" >
                          <i ></i>
                          <div class="like-total">{{item.liked}}</div>
                      </div> -->
                  </div>
              </div>
            </div>
          </template>
        </waterfall>
      </div>
      <div class="loadmore">
        <button @click="loadmore">加载更多内容</button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'page',
  data(){
      return{
          data:[//瀑布流数据
            {
              imgId:"001",
              title:"又是一年圣诞季，去年一个人在尼斯孤独的吃着冰淇淋逛着圣诞集市，今年搂着大家一起在",
              src:require('@/assets/index/游记1.jpg'),
              user:require('@/assets/index/头像1.jpg'),
              name:'MagicRabbit',
              liked:498
            },
            {
              imgId:"002",
              title:"上海迪斯尼最强攻略 首刷上海迪斯尼，便幸运的将几款热门项目都玩儿了个遍。 🏰 🏰",
              src:require('@/assets/index/游记2.jpg'),
              user:require('@/assets/index/头像2.jpg'),
              name:'Christine玥yue加油',
              liked:500
            },
            {
              imgId:"003",
              title:"慕尼黑啤酒节开幕大赏！两只眼里只有重金属，酒精和黑暗反应的化学博士去德国会干什么",
              src:require('@/assets/index/游记3.jpg'),
              user:require('@/assets/index/头像1.jpg'),
              name:'MagicRabbit',
              liked:582
            },
            {
              imgId:"004",
              title:"🇱🇰打卡【斯里兰卡】热门景点—狮子岩 2019年开年第一游，选择了斯里兰卡！这个",
              src:require('@/assets/index/游记4.jpg'),
              user:require('@/assets/index/头像2.jpg'),
              name:'Christine玥yue加油',
              liked:1524
            },
            {
              imgId:"005",
              title:"新加坡滨海湾花园是来到新加坡自由行必访的热门景点🔥 花园内有2️⃣座知名冷室：云",
              src:require('@/assets/index/游记5.gif'),
              user:require('@/assets/index/头像1.jpg'),
              name:'MagicRabbit',
              liked:5678
            },
            {
              imgId:"006",
              title:"住民宿常常像是闯关游戏，let us go！ 在全世界过圣诞 香港 ",
              src:require('@/assets/index/游记6.gif'),
              user:require('@/assets/index/头像2.jpg'),
              name:'Christine玥yue加油',
              liked:5687
            }
          ],
          col:2//瀑布流列数
      }
  },
  methods:{
    // scroll(scrollData){
    //     // console.log(scrollData)
    // },
    loadmore(index){
        this.data = this.data.concat(this.data)
    },
    jumpTo(imgId){
      this.$router.push({//跳转指定
        path:'/raiders',
        query:{
          id:imgId
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .contant{
    h2{
      margin-left:8px;
    }
    .container-water-fall{
      margin-top:30px;
      .cell-item{
        margin:8px;
        .item-img{
          border-radius:10px;
        }
        .item-body{
          .item-desc{
            white-space:normal;
            padding:5px;
            height:3em;
            overflow: hidden;
            font-weight: bold;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient:vertical;
          }
        }
        .item-footer{
          display:flex;
          flex-direction: row;
          justify-content:space-between;
          align-items:center;
          img{
            width:1.2em;
            height:1.2em;
            border-radius:0.6em;
            margin-right: 0.2em;
          }
          p{
            display:flex;
            align-items:center;
            font-size:0.6em;
            color:rgba(0,0,0,0.4);
          }
          p:last-child{
            font-weight:bold;
            color:rgba(0,0,0,0.6);
          }
        }
      }
    }
    .loadmore{
      text-align: center;
      margin:10px 0;
      button{
        border:none;
        outline:none;
        background-color: transparent;
        color:#0cbf79;
        font-size:1.2em;
      }
    }
  }
</style>
